import { useState, memo, forwardRef, useImperativeHandle, useRef, useEffect } from 'react'
import {message} from 'antd'
import bus from '../../../../../utils/eventBus'
import LdDrawer from '../../../../../components/LdDrawer'
import LdPrintTable from '../../../../../components/LdPrintTable'
import LdContent from '../../../../../components/LdContent'
import './index.scss'
import doc from "../../../../../assets/file-icon/doc.png";
import pdf from "../../../../../assets/file-icon/pdf.png";
import xsl from "../../../../../assets/file-icon/xsl.png";
import xls from "../../../../../assets/file-icon/xls.png";
import ppt from "../../../../../assets/file-icon/ppt.png";
import txt from "../../../../../assets/file-icon/txt.png";
import rtf from "../../../../../assets/file-icon/rtf.png";
import tiff from "../../../../../assets/file-icon/tiff.png";
import jpg from "../../../../../assets/file-icon/jpg.png";
import xlsx from "../../../../../assets/file-icon/xlsx.png";
import png from "../../../../../assets/file-icon/png.png";
import copy from "../../../../../assets/file-icon/copy.png";
interface pageConfigType { total: number, pageSize: number, currentPage: 1 }
const FILETYPE = {
    doc,
    pdf,
    xsl,
    xls,
    xlsx,
    ppt,
    txt,
    rtf,
    tiff,
    jpg,
    png,
};
const DetailView = forwardRef((props: any, ref: any) => {
    const { onClose, mode = "print", detail = {} } = props
    const pageConfig = useRef<pageConfigType>({
        total: 0,
        pageSize: 10,
        currentPage: 1
    })
    const docInfo = useRef<any[]>([
        { label: "密级", value: "", model: "fileLevelLable" },
        { label: "页数", value: "", model: "page" },
        { label: "方式", value: "", model: "printLayerText" },
        { label: "纸张", value: "", model: "pageSizeText" },
        { label: "色彩", value: "", model: "printColorText" },
    ])
    const columns = useRef<any[]>([
        { key: "identify", dataIndex: "identify", title: '标识' },
        { key: "pageNum", dataIndex: 'pageNum', title: "页码", width: 80 },
        { key: 'partNum', dataIndex: 'partNum', title: '第几份', width: 120 }
    ])
    const [data, setData] = useState<any[]>([])
    const loadFileIcon = (): any => {
        if (mode === "copy") {
            return copy;
        } else {
            if (!detail.fileType) {
                return doc;
            }
            const fileType = detail.fileType.toLocaleLowerCase();
            if (FILETYPE.hasOwnProperty(fileType)) {
                return (FILETYPE as any)[fileType];
            } else {
                return doc;
            }
        }
    }
    const loadData = () => {
        const payload = {
            ...pageConfig.current,
            identifyPart: detail.identify,
            serialNum: detail.serialNum
        };
        window.chromePro.getPrintRecordDetail(JSON.stringify(payload));
    }
    const getDetailData = (res: any) => {
        if (res.code === 200) {
            setData(res.data.logDetail)
            pageConfig.current = {...pageConfig.current,total:res.total}
        } else {
            message.error(res.message || "获取数据失败!");
        }
    }
    const handlePage = (data: pageConfigType) => {
        pageConfig.current = { ...pageConfig.current, ...data }
        loadData()
    }
    useEffect(() => {
        if (detail && detail.identify) {
            loadData();
            docInfo.current.forEach((item: any) => {
                item.value = detail[item.model];
            });
        }
        bus.addListener("getPrintRecordDetailFinished", getDetailData);
    }, [])
    useEffect(() => {
        return () => {
            bus.removeListener("getPrintRecordDetailFinished", getDetailData);
        }
    }, [])
    return (
        <>
            <LdDrawer title="打印记录详情" onClose={onClose}>
                <div className='h100'>
                    <div className="file-info flex-start align-center">
                        <img draggable={false} src={loadFileIcon()} alt="" style={{ width: '72px', height: '72px' }} />
                        <div className="h100 ml-17 flex-between flex-column">
                            <div>
                                <h6 className="file-title">{detail.fileTitle}</h6>
                                <p className="file-time">{detail.fileCreateTime}</p>
                            </div>
                            <div className="paper-info">
                                {
                                    docInfo.current.map((item: any, index: number) => {
                                        return (
                                            <div key={index} className="p-item">
                                                <span style={{ marginRight: '3px' }}>{item.label}: </span>
                                                {/* {paperSecret: item.model === 'secret' } */}
                                                <span style={{ color: '#333' }} className={`${item.model === 'secret' ? 'paperSecret' : null}`}>{
                                                    item.value
                                                }</span>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                        </div>
                    </div>
                    <div className="table-content">
                        <LdPrintTable handlePage={handlePage} columns={columns.current} data={data} rowSelection={false} pageConfig={pageConfig.current}></LdPrintTable>
                    </div>
                </div>
            </LdDrawer>
        </>
    )
})
export default memo(DetailView)